<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>SpringBoot实现广播式WebSocket</title>
    <style>
        .mg10-box{
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="mg10-box">
    <h3>解析聚信力</h3>
</div>
<div class="mg10-box">
    选择执行方法：<select id="method">
                    <option value="">--请选择方法--</option>
                    <option th:each="dd : ${methods }" th:value="${dd}" th:text="${dd}"></option>
                </select>
</div>
<div class="mg10-box">
    开始时间：<input id="text1" type="text" value="2018-09-28 00:00:00"/>
    结束时间：<input id="text2" type="text" value="2018-09-28 00:00:00"/>
</div>
<div class="mg10-box">
    <button onclick="send()">开始解析</button>    <button onclick="closeWebSocket()">关闭连接</button>
</div>
<div class="mg10-box">
    总数：<span id="total">0</span>条，
    剩余：<span id="surplus">0</span>条。
    当前ip：<span th:text=" ${ip} " >无法获取ip</span> ,
    当前端口： <span th:text=" ${host} " >无法获取端口</span>。
</div>
<div id="message" class="mg10-box">
</div>

</body>

<script type="text/javascript" th:inline="javascript">
    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://"+[[${ip}]]+":"+[[${host}]]+"/websocket");
    }
    else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("连接错误。。");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("建立连接。。");
    }


    //接收到消息的回调方法
    websocket.onmessage = function(event){

        var obj = JSON.parse(event.data);
        if (obj.code==1){ //剩余数
            document.getElementById('surplus').innerHTML=obj.message
        }
        if (obj.code==2){ //总数
            document.getElementById('total').innerHTML= obj.message
            document.getElementById('surplus').innerHTML=obj.message
        }

        if (obj.code==3||obj.code==200){ //完成
            setMessageInnerHTML(obj.message);
        }
        if (obj.code==201||obj.code==202){ //产生异常
            printSplit()
            setMessageInnerHTML("错误代码:"+obj.code);
            setMessageInnerHTML("错误参数:"+obj.param);

            setMessageInnerHTML("错误信息:"+obj.message);
        }

    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("连接关闭。。");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';

    }
    //打印分割线
    function printSplit(){
        setMessageInnerHTML("=====================================================分割线========================================================");
    }
    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    function send(){
        var message = {"method":document.getElementById('method').value,"param":document.getElementById('text1').value+"&"+document.getElementById('text2').value};
        websocket.send(JSON.stringify(message));
    }
</script>
</html>